<template>
  <div v-transfer-dom :data-transfer="transfer">
    <transition :name="transitionNames[1]">
      <div :class="maskClasses" v-show="visible" @click="mask"></div>
    </transition>
    <div :class="wrapClasses" @click="handleWrapClick">
      <transition :name="transitionNames[0]" @after-leave="animationFinish">
        <div :class="classes" :style="mainStyles" v-show="visible">
          <div :class="[prefixCls + '-content']">
            <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
              <slot name="close">
                <Icon type="ios-close-empty" />
              </slot>
            </a>
            <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
            <div :class="[prefixCls + '-body']" v-if="showBody">
              <slot v-if="!jsControlContent"></slot>
              <iframe :id="iframeId" :src="showUrl" frameborder="0" scrolling="auto" class="aty-iframe" :style="iframeStyle" v-if="jsControlContent"></iframe>
            </div>
            <div :class="[prefixCls + '-footer']" v-if="!footerHide">
              <slot name="footer">
                <i-button type="text" size="large" @click.native="cancel">{{ localeCancelText }}</i-button>
                <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
              </slot>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script type="text/ecmascript-6"  src="./modal.js"></script>
